<template>
  <div>
    <!-- 标题 -->
    <child-nav-bar
      title="教师管理"
      beforePath="/staging"
      placeholder="请输入教师名称"
      :queryParams="queryParams"
      @handleQuery="handleQuery"
    ></child-nav-bar>

    <!-- 学生列表 -->
    <van-swipe-cell v-for="item in StudentList" :key="item.id">
      <van-card :title="item.nickname" :thumb="'http://localhost:8015/user/'+ item.uploadFile">
        <!-- 学院信息 -->
        <template #desc>
          <div style="color: darkgray">
            {{item.departmentName}}<br>
            {{item.majorName}}
          </div>
        </template>
        <!-- 学生联系方式 -->
        <template #price>
          <div>
            {{item.phone}}
          </div>
        </template>
        <!-- 学生的账号管理状态 -->
        <template #price-top>
          <div>
            <span v-show="item.status === 0" style="color: rgba(255, 0, 0, 0.539);">未通过</span>
            <span v-show="item.status === 1">审批中</span>
            <span v-show="item.status === 2" style="color: rgba(0, 128, 0, 0.62);">通过</span>
          </div>
        </template>
      </van-card>
      <template #right>
        <van-button square text="通过" @click="modification(item.id,2)" :disabled="item.status!==1" type="primary" class="delete-button" />
        <br>
        <van-button square text="驳回" @click="modification(item.id,0)" :disabled="item.status!==1" type="danger" class="delete-button" />
      </template>
    </van-swipe-cell>

    <!-- 加载更多 -->
    <div v-if="StudentList.length < total" @click="search(queryParams.pageSize+=10)" style="text-align: center;color: darkgray">
      点击加载更多
    </div>
  </div>
</template>

<script>
import {accountManagement} from "@/api/teacher/pupil";
import { getDepartments } from '@/api/user'
import {Notify} from "vant";
import {pagingTeacher} from "@/api/achievement_typeAPI";

export default {
  name: "index",
  data(){
    return{
      // 查询出来的总条数
      total:0,
      // 学生信息
      student:{},
      // 学生信息列表
      StudentList:[],
      queryParams: {
        pageNum: 1,
        pageSize:10,
        departmentId:undefined,
        nickname:undefined, // 名称
        queryItems:[], // 单选框列表
      }
    }
  },
  created() {

    this.search();

    getDepartments().then( res =>{


      let list = res.data.map( d =>{
        return{
          label:d.departmentName,
          value:d.departmentId
        }
      })
      console.log(list)
      this.queryParams.queryItems = [{
        label:'学院',
        value:'departmentId',
        children: list
      }]
    })
  },
  methods:{
    handleQuery(){
      this.queryParams.pageNum = 1
      this.queryParams.nickname = this.queryParams.queryInput
      this.search()
    },
    /**
     * 返回设置页面
     * */
    onClickLeft(){
      this.$router.push("/staging")
    },
    /**
     * 获取学生列表信息
     * */
    async search(){
      let res = await pagingTeacher( { ...this.queryParams , queryItems: [] });
      this.StudentList = res.data.list;
      this.total = res.data.total;
    },
    /**
     * 学生状态修改事件
     * 0 - 驳回
     * 2 - 通过
     * */
    async modification(id,status){
      this.student.id=id;
      this.student.status=status;
      let res = await accountManagement(this.student);
      // 修改成功
      if (res.code === 200){
        // 提示信息
        Notify({ type: 'success', message: res.message});
        // 刷新页面
        await this.search()
      }
    },
  }
}
</script>

<style scoped lang="scss">

</style>
